<template>
  <div class="login-container">
    <div class="box">
      <div class="left">
        <table></table>
        <div class="logo">
          <img
            src="./../../assets/images/login/circle.png"
            style="width: 86px; height: 86px"
            alt=""
          />
        </div>
        <div class="title">兰考县智慧养老服务平台</div>
        <div class="bottom">
          <img
            src="./../../assets/images/login/bottom.png"
            style="width: 397px; height: 270px"
            alt=""
          />
        </div>
      </div>
      <div class="right">
        <div class="form_box">
          <div class="title">用户登录</div>
          <el-form
            :model="loginForm"
            status-icon
            :rules="loginRules"
            ref="loginForm"
            class="demo-loginForm"
          >
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                prefix-icon="el-icon-user"
                resize="both"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                prefix-icon="el-icon-lock"
                show-password
                resize="both"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <div class="code">
                <el-input
                  type="text"
                  v-model="loginForm.code"
                  prefix-icon="el-icon-folder-checked"
                  resize="both"
                ></el-input>
                <div @click="changeCodeImgHandler">
                  <img :src="codeImg" alt="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 100%"
                type="primary"
                @click="submitForm('loginForm')"
                round
                size="large"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import md5 from "js-md5";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("Please enter the correct user name"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("The password can not be less than 6 digits"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "admin",
        password: "admin",
        code: "",
      },
      codeImg: "",
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
            message: "请输入用户名",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            // validator: validatePassword,
            message: "请输入密码",
          },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
      },
    };
  },
  created() {
    this.changeCodeImgHandler();
  },
  methods: {
    ...mapMutations("user", ["setInfo", "setMenus", "setKey", "setCode"]),
    changeCodeImgHandler() {
      this.$api.login.code().then((res) => {
        if (res.code == 200) {
          this.codeImg = res.data.image;
          this.setKey(res.data.key);
        }
      });
    },
    routeHandelr(data) {
      let arr = data;
      arr.forEach((item) => {
        // item.meta = { title: item.name, icon: item.source };
        item.meta = { title: item.name, icon: "el-icon-s-tools" };
        if (item.children) {
          item.children.forEach((child) => {
            // child.meta = { title: child.name, icon: child.source };
            child.meta = { title: child.name, icon: "el-icon-star-off"};
          });
        }
      });
      return arr;
    },
    submitForm(formName) {
      this.setCode(this.loginForm.code);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            password: md5(this.loginForm.password),
            username: this.loginForm.username,
            tenantId: "000000",
            grant_type: "captcha",
            scope: "all",
            type: "account",
          };
          this.$api.login.login(obj).then((res) => {
            if (res.access_token) {
              this.setInfo(res);
              this.$api.login.menus().then((res) => {
                if (res.code == 200) {
                  this.setMenus(this.routeHandelr(res.data));
                  this.$router.push('/home');
                }
              });
            } else {
              this.$message.error(res.msg);
              this.changeCodeImgHandler();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" socped>
.login-container {
  min-height: 100%;
  width: 100%;
  background-image: url("./../../assets/images/login/bg.jpg");
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    width: 1005px;
    height: 600px;
    background: #ffffff;
    box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.06);
    border-radius: 5px 0px 0px 0px;
    display: flex;
    .left {
      width: 423px;
      height: 600px;
      background: linear-gradient(133deg, #83bbfc, #0076fe);
      border-radius: 4px 0px 0px 4px;
      .logo {
        margin-top: 75px;
        display: flex;
        justify-content: center;
      }
      .title {
        margin-top: 25px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #ffffff;
        display: flex;
        justify-content: center;
      }
      .bottom {
        display: flex;
        justify-content: center;
        margin-top: 100px;
      }
    }
    .right {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .form_box {
        width: 419px;
        height: 372px;
        .title {
          color: #333;
          margin-bottom: 40px;
          font-weight: 500;
          font-size: 22px;
          letter-spacing: 4px;
        }
        .el-input--prefix .el-input__inner {
          border-radius: 35px;
        }
        .code {
          display: flex;
          align-items: center;
          .el-input {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>